//基础
import { useState, useEffect } from "react";
import { Flex, Layout, Menu, ConfigProvider } from "antd";
// 路由二级入口
import { Outlet, useNavigate, useLocation } from "react-router-dom";
// 样式文件
import "./App.css";

// 常量属性
const { Header, Footer, Content } = Layout;
// 外围样式
const headerStyle = {
  width: "100%",
  height: 64,
  lineHeight: "64px",
  position: "sticky",
  top: 0,
  zIndex: 1,
  display: "flex",
  flexDirection: "row",
  alignItems: "center",
  textAlign: "center",
  color: "#fff",
  backgroundColor: "#3f3026",
  paddingInline: 48,
};
const footerStyle = {
  textAlign: "center",
  color: "#fff",
  height: 64,
  backgroundColor: "#3f3026",
};
const contentStyle = {
  textAlign: "center",
  minHeight: `calc(100vh - ${headerStyle.height}px - ${footerStyle.height}px)`,
  color: "#000",
  backgroundColor: "#f6f6f6",
};
const layoutStyle = {
  borderRadius: 8,
  width: "calc(100%)",
  maxWidth: "calc(100%)",
};
// Menu的内容
const items1 = [
  {
    key: "橄榄球",
    label: "橄榄球",
    path: "/rugby",
  },
  {
    key: "篮球",
    label: "篮球",
    path: "/basketball",
  },
];

function App() {
  //#region 属性定义
  let [menuSelectedKeys, setMenuSelectedKeys] = useState([]);
  // 路由跳转
  const navigate = useNavigate();
  // 获取当前路由信息
  let location = useLocation();
  //#endregion

  //#region 基础方法
  // onSelect title选择后触发
  function menuOnSelect(e) {
    console.log("yaojunhao menuOnSelect_e", e);
    setMenuSelectedKeys([e.key]);
    // 路由跳转地址
    let path = e?.item?.props?.path;
    navigate(path);
  }
  //#endregion

  //#region 监视

  // 监视到路由变化
  useEffect(() => {
    console.log("yaojunhao useEffect_location", location);
    let itemsIndex = items1.findIndex((item) => item.path == location.pathname);
    if (itemsIndex >= 0) {
      let key = items1[itemsIndex].key;
      // 设置title选中项
      setMenuSelectedKeys([key]);
    }
  }, []);
  //#endregion
  return (
    <Flex gap="middle" wrap>
      <Layout style={layoutStyle}>
        <Header style={headerStyle}>
          <ConfigProvider
            theme={{
              components: {
                Menu: {
                  /* 这里是你的组件 token */
                  darkItemBg: "#3f3026",
                  darkItemSelectedColor: "#e1af6b",
                  darkItemSelectedBg: "#745323",
                  darkPopupBg: "#3f3026",
                },
              },
            }}
          >
            <Menu
              theme="dark"
              mode="horizontal"
              selectedKeys={menuSelectedKeys}
              items={items1}
              onSelect={(e) => menuOnSelect(e)}
              style={{
                flex: 1,
                minWidth: 0,
              }}
            />
          </ConfigProvider>
        </Header>
        <Content style={contentStyle}>
          <Outlet></Outlet>
        </Content>
        <Footer style={footerStyle}>Footer</Footer>
      </Layout>
    </Flex>
  );
}

export default App;
